<template>
  <div
    class="question-item"
    @click="toDetails"
  >
    <div class="text">
      <div class="title">
        {{ data.issueDescription }}
      </div>
      <div class="item">
        质量源：{{ data.qualityName }}
        <span
          class="status"
          :status="data.status"
        >{{ status }}</span>
      </div>
      <div class="item">
        创建人：{{ data.username }}
      </div>
      <div class="item">
        处理人：{{ data.handleUserName }}
      </div>
      <div class="item">
        提交时间：{{ dayjs(data.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <div class="option">
        <van-button
          plain
          type="info"
          size="small"
          @click.stop="edit"
          v-if="data.status === 0"
        >
          修改
        </van-button>
        <van-button
          plain
          type="danger"
          size="small"
          @click.stop="remove"
          v-if="data.status === 0"
        >
          删除
        </van-button>
        <van-button
          plain
          type="warning"
          size="small"
          @click.stop="close"
          v-if="data.status === 1"
        >
          关闭
        </van-button>
      </div>
    </div>
    <div class="right">
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "QuestionItem",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    status() {
      return { 0: "待处理", 1: "已处理", 2: "已关闭" }[this.data.status];
    },
  },
  data() {
    return {
      dayjs,
    };
  },
  methods: {
    toDetails() {
      this.$router.push({
        path: "/question/details",
        query: {json: JSON.stringify(this.data),},
      })
    },
    edit() {
      this.$emit('edit')
    },
    remove() {
      this.$emit('remove')
    },
    close() {
      this.$emit('close')
    }
  }
};
</script>

<style lang="scss" scoped>
.question-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  -ms-flex-align: stretch;
  .text {
    flex: 1;
    width: 0;
    .title {
      font-size: 16px;
      font-weight: 600;
    }
    .item {
      width: 100%;
      margin-top: 10px;
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .status {
        font-size: 14px;
        &[status="0"] {
          color: #d9001b;
        }
        &[status="1"] {
          color: #f59a23;
        }
        &[status="2"] {
          color: #2467eb;
        }
      }
    }
    .option {
      margin-top: 10px;
      .van-button {
        margin-right: 15px;
        padding: 0 20px;
      }
    }
  }
  .right {
    padding: 0 0 0 15px;
  }
}
</style>
